<template>
    <div style="display: flex; flex-direction:column">

        <Button type="text" @click="setZoom(0); emit('zoom', 0)">1:1</Button>

        <div ref="refWrap" class="slider-bg" id="xxx">
            <div ref="refHandle" class="ivu-tooltip slider-handle" id="hhh">
                <div class="ivu-tooltip-rel">
                    <div tabindex="0" class="ivu-slider-button button"></div>
                </div>
            </div>
            
        </div>
    </div>
</template>

<style scoped>
.slider {
    width:20px
}
.slider-bg {
    flex:1;
    width: 4px;
    margin: 16px 0;
    background-color: #e8eaec;
    border-radius: 3px;
    vertical-align: middle;
    position: relative;
    cursor: pointer;
    margin-left: 30px;
}
.slider-handle {
    margin-left: -8px;
}

.button {
    width: 18px;
    height: 18px;
}
</style>

<script lang="ts" setup>
import debouncer from "../../../base/debouncer"
import {ref, onMounted, Ref} from 'vue'

const refWrap = ref(null) as unknown as Ref<HTMLElement>
const refHandle = ref(null) as unknown as Ref<HTMLElement>

const zero = 173.5



onMounted (function() {

    let total = $(refWrap.value).innerHeight()||0 - ($(refHandle.value).outerHeight()||0)
    let range = total/2

    $(refHandle.value)
        .offset({top: zero})
        .draggable({
            containment: refWrap.value ,
            axis: 'y' ,
            drag: debouncer(( event:any, ui:any ) => {
                let pos = ui.position.top-range
                emit("zoom", pos/range)
            })
        })
})

function setZoom(zoom: number) {
    let total = ($(refWrap.value).innerHeight()||0) - ($(refHandle.value).outerHeight()||0)
    let range = total/2
    $(refHandle.value)
        .offset({top: zero+range*zoom})
}

const emit = defineEmits(["zoom"])

</script>